(function flexible(window,document){
    //  获取HTML的根元素
    var docEl = document.documentElement
    //  dpr 物理像素比  pc为1 移动端为2
    // 判断他的物理像素比  没有的话则为1
    var dpr = window.devicePixelRatio || 1
    function setBodyFontSize() {
        // 如果页面中有body 就设置body 字体大小
        // 没有body的意思 当js执行时body还没有执行 也就是在body上面
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        }else{
            // 没有body元素 则等页面主要的dom元素加载完毕之后再去设置body
            document.addEventListener('DOMContLoaded',setBodyFontSize)
        }
    }
    setBodyFontSize();

    
    function setRemUnit() {
        // 设置HTML元素的文字大小  将HTML的宽度除以10份
        var rem = docEl.clientWidth / 10;
        // 在设置HTML的字体大小
        docEl.style.fontSize = rem + 'px';
    }
    setRemUnit()

    // 当页面大小发生变化的时候 要重新设置一下rem的大小
    window.addEventListener('resize',setRemUnit)
    // pagesshow  意思是但页面重新加载的时候触发
    // 页面重新加载会触发load 事件  加载 前进 后退 刷新 都可以
    window.addEventListener('pageshow',function(e) {
        // e.persisted 返回的是true 也就是说如果这个页面是缓存取过来的页面。也需要重新计算一下了rem的大小
        if(e.persisted) {
            setRemUnit()
        }
    })

    //  detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法  可以使用下面方法
    if(dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent';
        fakeBody.appendChild(fakeBody)
        if(testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
})(window,document)